//ViewForm.js
import React, {Component} from 'react';
import {showData,olapRollUp,olapDrillDown,olapPageSwitch} from "../api/formManagement";
import {Col, Row,Button,Descriptions,Select,Divider , Form, } from "antd";

import {MinusCircleOutlined, PlusCircleOutlined} from '@ant-design/icons'
import '../pages/webExcel.css'
import {
    PlusSquareOutlined, MinusSquareOutlined
} from '@ant-design/icons';

export default class ViewForm extends Component {

    constructor(props) {
        super(props);
        this.state = {
            xCellNum: 0,
            yCellNum: 0,
            modelList: [],
            formId:"",
            vpList:[],     //视点
            pageList:[],    //页面
            pageListInitVals:{}
        }
    }

    componentDidMount() {
        let _formId = this.props.match.params.formId;
        showData(_formId).then(
            (res) => {

                // let map1 = new Map();
                // map1.set(5,60163);
                // map1.set(6,60256);


                let pageViewSelectedId = {};
                if(res.data.pageList.length>0){
                    res.data.pageList.map((item,index)=>{
                        pageViewSelectedId[item.dimType]=item.selectedMemberId;
                    })
                }

                    this.setState({
                    x: res.data.x,
                    y: res.data.y,
                    modelList: res.data.modelList,
                    formId:_formId,
                    vpList:res.data.vpList,  //视点
                    pageList:res.data.pageList,  //视点
                    pageListInitVals:pageViewSelectedId
                });
            },
            (error) => {
                console.log("get response failed!");
            }
        );
        console.log("componentDidMount :this.state.report_id:");
    }
    /**
     * Executes the formula on the `value` usign the FormulaParser object
     */
    executeFormula = (cell, value) => {
        return value;
    }
    //上卷
    //pnFlag 正负标志  rowColFlag 行列标志
    rollOrDrill=(pnFlag,rowColFlag,rowNo,colNo,dimType)=>{
            console.log("pnFlag:"+pnFlag+",rowColFlag:"+rowColFlag+",rowNo:"+rowNo+",colNo:"+colNo+",dimType:"+dimType)
        let _formId=this.state.formId;
        if(pnFlag==-1){
            olapRollUp(_formId,pnFlag,rowColFlag,rowNo,colNo,dimType).then(
                (res) => {
                    this.setState({
                        //x: res.data.x,
                        y: res.data.y,
                        modelList: res.data.modelList,
                        formId:_formId
                    });
                },
                (error) => {
                    console.log("get response failed!");
                }
            );
        }else if(pnFlag==1){
            olapDrillDown(_formId,pnFlag,rowColFlag,rowNo,colNo,dimType).then(
                (res) => {
                    this.setState({
                        x: res.data.x,
                        y: res.data.y,
                        modelList: res.data.modelList,
                        formId:_formId,
                        //pageList:res.data.pageList,  //视点
                        //pageListInitVals:pageViewSelectedId
                    });
                },
                (error) => {
                    console.log("get response failed!");
                }
            );
        }
    }

    render() {
        const rowFlag=1;   //行标志
        const colFlag=1;    //列标志

        let _y = this.state.y;
        // _gridTemplateRows
        // _gridTemplateColumns
        let _gridTemplateRows = "repeat(" + _y + ", 25px)"

        let _x = this.state.x;
        let _gridTemplateColumns = "40px repeat(" + (_x - 1) + ", 150px)"
        const wrapper = {
            display: "grid",
            gridTemplateColumns: _gridTemplateColumns,
            gridTemplateRows: _gridTemplateRows,
            backgroundColor: "#999999",
            gridRowGap: "2px",
            gridColumnGap: "2px",
            padding: 2,
            overflow:"auto"
        }

        const itemClass = {
            fontSize: 4,
            textAlign: "center",
            border: "1,solid, e5e4e9",
            backgroundColor: "white"
        }

        const getGridss = () => {
            return <div style={wrapper}>
                {getItems()}
            </div>
        }


        const getItems = () => {
            let r = [];
            for (var val of this.state.modelList) {
                let _i = getItem(val)
                r.push(_i)
            }
            return r;
        }

        const getItem = (item) => {
            console.log(item.factData)
            let _align="right";
            let _renderBtn=false;
            if(item.align==0){
                _align="left"
            }else if(item.align==1){
                _align="center"
            }else if(item.align==2){
                _align="right"
            }
            //是否有展开收缩符号
            if(item.rollUpDrillDownFlag===1 || item.rollUpDrillDownFlag===-1){
                _renderBtn=true;
            }




            if(item.factData==true){  //事实数据
                return  <div
                    // style={itemClass}
                    key={item.key} style={{textAlign:_align,
                    backgroundColor: '#ffffff', gridColumnStart: item.gridColumnStart,
                    gridColumnEnd: item.gridColumnEnd,
                    gridRowStart: item.gridRowStart,
                    gridRowEnd: item.gridRowEnd
                }}>
                    {item.strValue}
                </div>
            }else{
                return <div
                    // style={itemClass}
                    key={item.key} style={{
                    textAlign:_align,
                    backgroundColor: '#ffffff', gridColumnStart: item.gridColumnStart,
                    gridColumnEnd: item.gridColumnEnd,
                    gridRowStart: item.gridRowStart,
                    gridRowEnd: item.gridRowEnd
                }}>
                    {getBlank(item.blank)}
                    {_renderBtn===true?
                    <Button type="link" size="small"
                            onClick={()=>this.rollOrDrill(item.rollUpDrillDownFlag,item.layoutType,item.gridRowStart,item.gridColumnStart,item.dimType)}
                    >{getPN(item.rollUpDrillDownFlag)}</Button>:""}
                    {item.strValue}
                </div>
            }
        }
//获取正负符号
        const getPN = (s) => {
            if (s == -1) {
                return <MinusCircleOutlined/>
            } else if (s == 1) {
                return <PlusCircleOutlined/>
            } else {
                return ""
            }
        }

        //get blank
        const getBlank = (p) => {
            //分割字符串
            let _s = "";
            if (p.length > 0) {
                let strArray = p.split(';');
                let _l = strArray.length;
                for (var num = 0; num < _l; num++) {
                    _s = _s + "  ";
                }
                return <span style={{whiteSpace: "pre"}}>{_s}</span>
            } else {
                //return <span></span>
                return ""
            }


            let s = "   "
            return <span style={{whiteSpace: "pre"}}>{s}</span>
        }


        const { Option } = Select;

        const onFinish = (values) => {
            console.log('Page Change Success:', values);
            let _formId=this.state.formId;

            // let _pages=[];
            // for(let _i in values){
            //     _pages.push(values[_i]);
            // }
            olapPageSwitch(_formId,values).then(
                (res) => {

                    let pageViewSelectedId = {};
                    if(res.data.pageList.length>0){
                        res.data.pageList.map((item,index)=>{
                            pageViewSelectedId[item.dimType]=item.selectedMemberId;
                        })
                    }


                    this.setState({
                        x: res.data.x,
                        y: res.data.y,
                        modelList: res.data.modelList,
                        formId:_formId,
                        vpList:res.data.vpList,  //视点
                        pageList:res.data.pageList,  //视点
                        pageListInitVals:pageViewSelectedId
                    });
                },
                (error) => {
                    console.log("get response failed!");
                }
            );


        };

        const onFinishFailed = (errorInfo) => {
            console.log('Failed:', errorInfo);
        };

        return (
            <>
                <Row>
                    <Descriptions   column={4}>
                        {
                            this.state.vpList.map((item,index)=>{
                                return (
                                    <Descriptions.Item  key={"vp_"+index}>{ item }</Descriptions.Item>
                                )
                            })
                        }
                    </Descriptions>
                    <div>页面：</div>
                    {
                            //todo page
                        this.state.pageList!=null  && this.state.pageList.length>0 ?
                            (
                               <Form name="horizontal_pageInfo"
                                     layout="inline"
                                     initialValues={this.state.pageListInitVals}

                                     onFinish={onFinish}>

                                   { this.state.pageList.map((item,index)=>{
                                    return (
                                            <Form.Item
                                                name={item.dimType}
                                                key={item.dimType}
                                            >
                                                <Select key={item.dimType}   style={{ width: 120 }}>
                                                    {
                                                        item.pageLayoutDataItems.map((item,index)=>{
                                                            return (
                                                                <Option value={ item.memberId } key={ item.memberId }>{ item.showName }</Option>
                                                            )
                                                        })
                                                    }
                                                </Select>
                                            </Form.Item>
                                    )
                                })
                                   }
                                <Form.Item>

                                    <Button
                                    // type="primary"
                                    htmlType="submit"
                                    >
                                    切换
                                    </Button>

                        </Form.Item>
                        </Form>
                        ) :("")
                    }

                </Row>
                <Divider/>
                {getGridss()}
            </>
        )
    }
}
